<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- 页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色，具体表现如下图：

   1）要求使用到事件委托 -->
    <ul id="ul">
        <li>西施</li>
        <li>貂蝉</li>
        <li>昭君</li>
        <li>凤姐</li>
        <li>芙蓉姐姐</li>
    </ul>
    <input type="button" value="按钮" id="btn" />
    <script>
        //    点击li,背景色红
        //    点击按钮,新增最前面 
        //    单击新增,背景为红
        //    1.获ul跟按钮
        var btn =document.querySelector('#btn');
        var ul=document.querySelector('#ul')
        // 给li的爸爸ul添加点击事件,委托爸爸管Li
        ul.addEventListener('click',function(e){
          if(e.target.nodeName==='li'){
            //   只要点击li的时候背景变色
            e.target.style.backgroundColor ='red';
          }
        })
        btn.addEventListener('click',function(){
            var lis=document.createElement('li');
            lis.innerHTML=prompt('请输入美女')
            ul.insertBefore(lis, ul.children[0]);
        })
            

    </script>
</body>

</html>